<template>
	<view class="container" :style="'width: '+ windowWidth +'px; height: '+ (boxStyle.height-55) +'px;'">
		<view :style="'width: '+ windowWidth +'px; height: '+(boxStyle.height) +'px;'">
			<div style="flex-direction: row;position: fixed;top: -10px;">
				<div style="padding-left: 22px;padding-top: 42px;flex-direction: row;justify-content: center;align-items: flex-start;"
					@click="selcetCity">
					<text style="color: #dddddd;font-size: 35upx;width: 90px;lines:2;text-overflow:ellipsis;"
						:style="{color:(showIndex==0?'#fff':'#dddddd')}">{{cityname}}
					</text>
					<image src="../../static/xiag.png" mode=""
						style="width: 14px;height: 14px;padding-top: 6px;position: fixed;top:36px ;left: 94px;"></image>
				</div>
				<view>
					<text style="color: #9b9b9b;font-size: 40upx;padding-top: 42px;font-weight: bold;"
						:style="{color:(showIndex==1?'#fff':'#A9A9A9')}" @click="tuijian" :class="showIndex == 1?'xuan':'mei'">推荐</text>
				</view>
				<text style="color: #9b9b9b;font-size: 40upx;padding-left: 40px;padding-top: 42px;font-weight: bold;"
					:style="{color:(showIndex==2?'#fff':'#A9A9A9')}" @click="guanzhu" :class="showIndex == 2?'xuan':'mei'">关注</text>
				<image src="../../static/sou.png" mode=""
					style="width: 20px;height: 20px;position: fixed;top: 31px;right: 14px;" @click="naviSearch"></image>
			</div>
			<!-- 
		 1.这里的 swiper 不是用来控制视频滑动的，而是用来控制左右滑动的，如果不需要的可以改成view
		 
		 2.为 视频无限加载，已经把 21 行的 appear 去掉了，加上了 loadmore 方法（第10行
		 3.由于方法比较多，可以采取下面的方式查看代码：
		 （1）Mac：按住 option 键，然后点击方法名，即可跳转到方法
		 （2）windows：按住 Alt 键，然后鼠标左击，即可跳转到方法		
		 -->
		 <!-- v-if="showIndex==1" -->
			<list @loadmore="getData" @scroll="scrolls" :loadmoreoffset="wHeight*3" :show-scrollbar="false"
				ref="listBox" :pagingEnabled="true" :scrollable="true" v-if="showIndex == 1">
	
				<!-- 刷新模块 -->
				<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
					:display="refreshing ? 'show' : 'hide'">
					<loading style="background-color: #FFFFFF;">
						<image src="@/static/img/index/logins.gif"
							:style="'width: 80upx; height: 30upx;margin-left: '+ (windowWidth - 200) +'px;'">
						</image>
					</loading>
				</refresh>
	
				<!-- 循环数据 -->
				<cell v-for="(item,i) in dataList" :key="i" >
					<!-- 用div把视频模组套起来 -->
					<div @disappear="stop()" :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'">
						<view class="root" :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'">
							<!-- 			<text style="font-size: 39px;color: #fff;">{{item.state}}</text>
							<text style="font-size: 39px;color: #fff;">{{item.describe}}</text>
							<text style="font-size: 39px;color: #fff;">{{item.isShowProgressBarTime}}</text> -->
							<!-- 具体视频参数可以参考官方文档
						说明：
						1.v-if很关键，这里主要是为了减少 dom 元素【这样才不会加载视频多了闪退】，
							这里 Math.abs(k-i)<=5 也就是往上预加载 5 个视频，往下预加载 
							个视频这样做的目的是为了让视频能够提前加载但是不播放，在真正滑到位
							置的时候播放视频。
							【2.0.1就是  1  Math.abs(k-i)<=1：请勿修改，记住，要不然会提前播放很多视频】
							
						2.要注意 @play="playIngs" 里面的 playIngs 方法，这个方法只是在视频播放的时候
							起效果，我们控制视频播放不是用这个的。这个的主要作用是给视频封面的。我们先用	
							下面的视频封面盖住视频，等到视频播放的时候，我们不要急着直接播放，而是延迟一下下，
							300-600ms左右。因为视频播放需要一点点时间，这点时间里会黑屏，这个时候我们就用
							下面的封面盖住，这样用户就不会有从黑屏到有画面的感觉了，但是如果遇到视频太大，缓冲
							时间太长，还是会出现短暂的黑屏，大部分是不会有黑屏的（这样盖住的话）。
							
							【更新记录：2.0版】已经解决了视频黑屏问题，和加载速度慢的情况，如果还是出现了黑屏，
							意味着此时手滑动的速度，已经超过了视频加载的速度，对于这个问题，建议修改 preloadNumber 
							变量，当它的值大一点的时候就会提前加载视频，这样用户在滑到视频的时候就不会有停顿感了
							【注意】：老用户在 video 中增加和修改 
							（1）:muted="!item.playIng"，
							（2）@timeupdate="timeupdate($event,i)"
							（3）把 199 行注释了，
							（4）:id="item._id"，
							（5）修改：uni.createVideoContext(this.dataList[this.k]._id + '' + this.k,this) 为
								uni.createVideoContext(this.dataList[this.k]._id,this)
							（6）在 timeupdate 方法里加入，if(index == this.k){把里面的加一个总的判断}
						3.其他的下面有详解
						 -->
							<video v-if="Math.abs(k-i)<=1" :ref="'item'+i" :id="item._id" :loop="true"
								:src="item.video_url" :muted="item.isplay" @play="playIngs(i)"
								:enable-progress-gesture="false" :page-gesture="false" :controls="false"
								:http-cache="true" :show-loading="false" :show-fullscreen-btn="false"
								:poster="item.video_url+'?x-oss-process=video/snapshot,t_0,f_jpg'" object-fit="contain"
								:style="'width: '+ (windowWidth + 62) +'px; height: '+ (boxStyle.height)  + 'px;'"
								style="left: -30;top: -10;" @timeupdate="timeupdate($event,i)"></video>
								<!-- <div :style="'width: '+ (windowWidth + 62) +'px; height: '+ (boxStyle.height)  + 'px;'"></div> -->
							<!-- 这里是封面 -->
							<image v-if="!item.playIng"
								:src="item.video_url+'?x-oss-process=video/snapshot,t_100,f_jpg'" :mode="mode"
								:style="'width: '+ (windowWidth + 62) +'px; height: '+ (wHeight - deleteHeight + 38) +'px; position: absolute;left:-30;'">
							</image>
							<!-- 
						mode: 图片裁剪、缩放的模式
						mode 有 14 种模式，其中 5 种是缩放模式，9 种是裁剪模式。
						https://uniapp.dcloud.io/component/image
						 -->
						</view>
						<!-- 直接用 view 就行了，一样是可以覆盖原生组件的 -->
						<!-- 这个是暂停时出现的图标 -->
						<view class="videoHover" @click="tapVideoHover(item.state,$event)" :style="boxStyle">
							<image v-if="item.state=='pause'" class="playState" src="@/static/img/index/play.png">
							</image>
						</view>
						<view class="userInfo" v-if="dataList[k].isShowProgressBarTime == false">
							<!-- v-if="item.isShowProgressBarTime == false" -->
							<!-- 1.头像 -->
							<view class="" style="" v-if="item.type_id == 2">
								<image @click.stop="toCreaterPage" class="userAvatar" :src="item.shopinfo_shop_logo"
									mode="aspectFill"></image>
								<image @click.stop="toCreaterPage" class="userAvatar" :src="item.shop_logo"
									mode="aspectFill" v-if="item.type_id == 1"></image>
								<!-- <text class="add">+</text> -->
	
							</view>
							<view class="" style="" v-if="item.type_id == 1">
								<image @click.stop="toCreaterPages" class="userAvatar" :src="item.memberinfo_headimgurl"
									mode="aspectFill"></image>
								<!-- 		<image @click.stop="toCreaterPage"
										class="userAvatar" :src="item.shop_logo" mode="aspectFill" v-if="item.type_id == 1"></image> -->
								<!-- <text class="add">+</text> -->
							</view>
							<!-- 2.点赞 -->
							<view @click="cLike(item.like);" style="opacity: 0.9; margin-top: 17px;">
								<!-- 		<image v-if="item.is_follow==0" src="@/static/images/flow_before.png"
									style="width: 33px; height: 24px; position: absolute; right: 8px;"
									@click.stop="addfollow"></image>
								<image v-else src="@/static/images/flow_after.png"
									style="width: 33px; height: 24px; position: absolute; right: 8px;"
									@click.stop="cancelFollow"></image> -->
								<image src="@/static/chakan.png"
									style="width: 33px; height: 24px; position: absolute; right: 8px;"></image>
								<text
									style="color: #FFFFFF; margin-top: 5px; font-size: 14px; text-align: center; margin-top: 30px; font-weight: bold;">{{youinfo.access_num}}</text>
							</view>
							<!-- 3.评论 -->
							<view class="comment" @click="toComment(i,item.id)" style="opacity: 0.9; margin-top: 17px;">
								<image src="@/static/img/index/liaotian-2.png"
									style="width: 35px; height: 35px; position: absolute; right: 7px;"></image>
								<text
									style="color: #FFFFFF; margin-top: 5px; font-size: 14px; font-weight: bold; text-align: center; margin-top: 40px ;">{{youinfo.commentNum}}</text>
							</view>
							<!-- 4.分享 -->
							<view @click.stop="handleForward" style="opacity: 0.9; margin-top: 17px;">
								<image src="@/static/img/index/share-fill.png"
									style="width: 40px; height: 40px; position: absolute; right: 5px;"></image>
								<text
									style="color: #FFFFFF; margin-top: 5px; font-size: 14px; text-align: center; font-weight: bold; margin-top: 40px;">分享</text>
							</view>
						</view>
						<!-- 唱片 -->
						<view v-if="dataList[k].isShowProgressBarTime == false"
							style="position: absolute; right: 10px;bottom: 20px;">
							<image src="/static/changpian.png" style="width: 50px; height: 50px;"></image>
						</view>
						<!-- 最底下的文字部分 -->
						<view class="content" v-if="!dataList[k].isShowProgressBarTime">
							<view class="left"
								style="display: flex;flex-direction: row;background-color: rgba(0,0,0,0.5);border-radius: 10rpx;font-size: 14px;align-items: center;text-overflow: ellipsis;overflow: hidden;padding: 10upx;max-width: 315rpx;"
								@click="open" v-if="item.type_id==2">
								<image src="../../static/images/car_href.png" style="width: 40upx;height: 40upx;">
								</image>
	
								<text class="name"
									style="color: #fff;margin-left: 20upx;font-size: 16px;width: 120px;lines:1;text-overflow:ellipsis;"
									v-if="item.goodslist.goods_name">{{item.goodslist.goods_name}}</text>
								<text class="name"
									style="color: #fff;margin-left: 20upx;font-size: 16px;lines: 1;width: 120px;lines:1;text-overflow:ellipsis;"
									v-else>{{item.title}}</text>
							</view>
							<view class="left"
								style="display: flex;flex-direction: row;background-color: rgba(0,0,0,0.5);border-radius: 10rpx;font-size: 14px;margin-top: 30upx;max-width: 315rpx;align-items: center;padding: 10upx;"
								@click="getNavCircle(item.circle_id,item.circle_type,item.is_state)"
								v-if="item.circle_id !=0">
								<image src="../../static/shang.png" style="width: 40upx;height: 40upx;"></image>
								<text class="name"
									style="color: #fff; word-wrap: break-word; word-break: normal;margin-left: 20upx;font-size: 16px;width: 120px;lines:1;text-overflow:ellipsis;">{{item.circle_name}}</text>
							</view>
							<text class="userName" :style="'width: '+ (windowWidth - 100) +'px;'"
								v-if="item.type_id == 2"
								@click="toshop(item.shopinfo_id)">@{{item.shopinfo_shop_name}}</text>
							<text class="userName" :style="'width: '+ (windowWidth - 100) +'px;'"
								v-if="item.type_id == 1"
								@click.stop="toCreaterPages">@{{item.memberinfo_user_name}}</text>
							<view class="left">
								<view style="flex-direction: row;align-items: flex-end;">
	
									<text class="words" :style="'width: '+ (windowWidth - 120) +'px;'"
										:class="isFload ? 'words' : 'wordp'">{{item.describe}}</text>
									<text class="zhankai" v-if="item.describe.length> 70 && isFload"
										@click="fload" style="color: #fff;">展开</text>
									<text class="zhankai" v-if="item.describe.length> 70 && !isFload"@click="fload" style="color: #fff;">收起</text>
								</view>
								<view
									style="display: flex;flex-direction: row;border-radius: 10rpx;font-size: 24rpx;align-items: flex-end;text-overflow: ellipsis;overflow: hidden;padding-bottom: 15px;padding-top: 10px;">
									<view v-for="(items,i) in item.topicdata">
										<text
											style="color: #fff; word-wrap: break-word; word-break: normal;font-size: 15px;padding-left: 5px;font-weight: bold;"
											@click="toti(items.id)">#{{items.cate_name}}</text>
									</view>
								</view>
							</view>
							<!-- 作品原声 -->
						</view>
						<!-- 1.视频预览时的图片，currenttimes：就是获取当前滑块的时间点，如果不需要，可以注释掉 -->
						<!-- 2.如果使用下面的视频预览的话要注意的是视频链接最好是阿里云上的，因为
							https://xxxxxxxxx.mp4?x-oss-process=video/snapshot,t_1000,f_jpg
							这个是阿里云的东西，至于其他的视频截帧我还没有试过。
							-->
						<!-- 3.阿里云视频截帧地址：https://help.aliyun.com/document_detail/64555.html -->
						<image v-if="item.isShowimage == true"
							:src="item.video_url+'?x-oss-process=video/snapshot,t_'+ currenttimes +'000,f_jpg'"
							mode="aspectFill"
							:style="'width: 120upx; height: 160upx; border-radius: 10upx; position: absolute; bottom: '+ (ProgressBarBottom + 90) +'upx; left: '+ (currentPositions - 15) +'px;'">
						</image>
					</div>
				</cell>
			</list>
			<list @loadmore="getData" @scroll="scrolls" :loadmoreoffset="wHeight*3" :show-scrollbar="false"
				ref="listBox" :pagingEnabled="true" :scrollable="true" v-if="showIndex == 2">
				<!-- 刷新模块 -->
				<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
					:display="refreshing ? 'show' : 'hide'">
					<loading style="background-color: #FFFFFF;">
						<image src="@/static/img/index/logins.gif"
							:style="'width: 80upx; height: 30upx;margin-left: '+ (windowWidth - 200) +'px;'">
						</image>
					</loading>
				</refresh>
				
				<!-- 循环数据 -->
				<cell v-for="(item,i) in dataList" :key="i" v-if="dataList.length > 0">
					<!-- 用div把视频模组套起来 -->
					<div @disappear="stop()" :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'">
						<view class="root" :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'">

							<video v-if="Math.abs(k-i)<=1" :ref="'item'+i" :id="item._id" :loop="true"
								:src="item.video_url" :muted="item.isplay" @play="playIngs(i)"
								:enable-progress-gesture="false" :page-gesture="false" :controls="false"
								:http-cache="true" :show-loading="false" :show-fullscreen-btn="false"
								:poster="item.video_url+'?x-oss-process=video/snapshot,t_0,f_jpg'" object-fit="contain"
								:style="'width: '+ (windowWidth + 62) +'px; height: '+ (boxStyle.height)  + 'px;'"
								style="left: -30;top: -10;" @timeupdate="timeupdate($event,i)"></video>
							<!-- 这里是封面 -->
							<image v-if="!item.playIng"
								:src="item.video_url+'?x-oss-process=video/snapshot,t_100,f_jpg'" :mode="mode"
								:style="'width: '+ (windowWidth + 62) +'px; height: '+ (wHeight - deleteHeight + 38) +'px; position: absolute;left:-30;'">
							</image>
						</view>
						<!-- 直接用 view 就行了，一样是可以覆盖原生组件的 -->
						<!-- 这个是暂停时出现的图标 -->
						<view class="videoHover" @click="tapVideoHover(item.state,$event)" :style="boxStyle">
							<image v-if="item.state=='pause'" class="playState" src="@/static/img/index/play.png">
							</image>
						</view>
						<view class="userInfo" v-if="dataList[k].isShowProgressBarTime == false">
							<!-- v-if="item.isShowProgressBarTime == false" -->
							<!-- 1.头像 -->
							<view class="" style="" v-if="item.type_id == 2">
								<image @click.stop="toCreaterPage" class="userAvatar" :src="item.shopinfo_shop_logo"
									mode="aspectFill"></image>
								<image @click.stop="toCreaterPage" class="userAvatar" :src="item.shop_logo"
									mode="aspectFill" v-if="item.type_id == 1"></image>
								<!-- <text class="add">+</text> -->
				
							</view>
							<view class="" style="" v-if="item.type_id == 1">
								<image @click.stop="toCreaterPages" class="userAvatar" :src="item.memberinfo_headimgurl"
									mode="aspectFill"></image>
								<!-- 		<image @click.stop="toCreaterPage"
										class="userAvatar" :src="item.shop_logo" mode="aspectFill" v-if="item.type_id == 1"></image> -->
								<!-- <text class="add">+</text> -->
							</view>
							<!-- 2.点赞 -->
							<view @click="cLike(item.like);" style="opacity: 0.9; margin-top: 17px;">
								<image src="@/static/chakan.png"
									style="width: 33px; height: 24px; position: absolute; right: 8px;"></image>
								<text
									style="color: #FFFFFF; margin-top: 5px; font-size: 14px; text-align: center; margin-top: 30px; font-weight: bold;">{{youinfo.access_num}}</text>
							</view>
							<!-- 3.评论 -->
							<view class="comment" @click="toComment(i,item.id)" style="opacity: 0.9; margin-top: 17px;">
								<image src="@/static/img/index/liaotian-2.png"
									style="width: 35px; height: 35px; position: absolute; right: 7px;"></image>
								<text
									style="color: #FFFFFF; margin-top: 5px; font-size: 14px; font-weight: bold; text-align: center; margin-top: 40px ;">{{youinfo.commentNum}}</text>
							</view>
							<!-- 4.分享 -->
							<view @click.stop="handleForward" style="opacity: 0.9; margin-top: 17px;">
								<image src="@/static/img/index/share-fill.png"
									style="width: 40px; height: 40px; position: absolute; right: 5px;"></image>
								<text
									style="color: #FFFFFF; margin-top: 5px; font-size: 14px; text-align: center; font-weight: bold; margin-top: 40px;">分享</text>
							</view>
						</view>
						<!-- 唱片 -->
						<view v-if="dataList[k].isShowProgressBarTime == false"
							style="position: absolute; right: 10px;bottom: 20px;">
							<image src="/static/changpian.png" style="width: 50px; height: 50px;"></image>
						</view>
						<!-- 最底下的文字部分 -->
						<view class="content" v-if="!dataList[k].isShowProgressBarTime">
							<view class="left"
								style="display: flex;flex-direction: row;background-color: rgba(0,0,0,0.5);border-radius: 10rpx;font-size: 14px;align-items: center;text-overflow: ellipsis;overflow: hidden;padding: 10upx;max-width: 315rpx;"
								@click="open" v-if="item.type_id==2">
								<image src="../../static/images/car_href.png" style="width: 40upx;height: 40upx;">
								</image>
				
								<text class="name"
									style="color: #fff;margin-left: 20upx;font-size: 16px;width: 120px;lines:1;text-overflow:ellipsis;"
									v-if="item.goodslist.goods_name">{{item.goodslist.goods_name}}</text>
								<text class="name"
									style="color: #fff;margin-left: 20upx;font-size: 16px;lines: 1;width: 120px;lines:1;text-overflow:ellipsis;"
									v-else>{{item.title}}</text>
							</view>
							<view class="left"
								style="display: flex;flex-direction: row;background-color: rgba(0,0,0,0.5);border-radius: 10rpx;font-size: 14px;margin-top: 30upx;max-width: 315rpx;align-items: center;padding: 10upx;"
								@click="getNavCircle(item.circle_id,item.circle_type,item.is_state)"
								v-if="item.circle_id !=0">
								<image src="../../static/shang.png" style="width: 40upx;height: 40upx;"></image>
								<text class="name"
									style="color: #fff; word-wrap: break-word; word-break: normal;margin-left: 20upx;font-size: 16px;width: 120px;lines:1;text-overflow:ellipsis;">{{item.circle_name}}</text>
							</view>
							<text class="userName" :style="'width: '+ (windowWidth - 100) +'px;'"
								v-if="item.type_id == 2"
								@click="toshop(item.shopinfo_id)">@{{item.shopinfo_shop_name}}</text>
							<text class="userName" :style="'width: '+ (windowWidth - 100) +'px;'"
								v-if="item.type_id == 1"
								@click="tome(item.memberinfo_id)">@{{item.memberinfo_user_name}}</text>
							<view class="left">
								<view style="flex-direction: row;align-items: flex-end;">
				
									<text class="words" :style="'width: '+ (windowWidth - 120) +'px;'"
										:class="isFload ? 'words' : 'wordp'">{{item.describe}}</text>
										<!-- v-if="item.describe.length> 70 && !isFload" -->
									<text class="zhankai" v-if="item.describe.length> 70 && isFload"
										@click="fload" style="color: #fff;">展开</text>	
										<text class="zhankai" v-if="item.describe.length> 70 && !isFload"@click="fload" style="color: #fff;">收起</text>
								</view>
								<view
									style="display: flex;flex-direction: row;border-radius: 10rpx;font-size: 24rpx;align-items: flex-end;text-overflow: ellipsis;overflow: hidden;padding-bottom: 15px;padding-top: 10px;">
									<view v-for="(items,i) in item.topicdata">
										<text
											style="color: #fff; word-wrap: break-word; word-break: normal;font-size: 15px;padding-left: 5px;font-weight: bold;"
											@click="toti(items.id)">#{{items.cate_name}}</text>
									</view>
								</view>
							</view>
							<!-- 作品原声 -->
						</view>

						<image v-if="item.isShowimage == true"
							:src="item.video_url+'?x-oss-process=video/snapshot,t_'+ currenttimes +'000,f_jpg'"
							mode="aspectFill"
							:style="'width: 120upx; height: 160upx; border-radius: 10upx; position: absolute; bottom: '+ (ProgressBarBottom + 90) +'upx; left: '+ (currentPositions - 15) +'px;'">
						</image>
					</div>
				</cell>
			<div v-else style="width: 100%;height: 800px;background-color: #000000;display: flex;justify-content: center;align-items: center;">
				<image src="../../static/dixia.png" mode="" style="width: 280upx;height: 280upx;"></image>
			</div>
			</list>

			<!-- 1.注意：进度条这类拖拽的东西不能放进block\cell这些循环体中的，要不然touchmove方法会捕捉有误 -->
			<view v-if="dataList[k].isShowProgressBarTime == true"
				:style="'position: absolute; bottom: '+ (ProgressBarBottom + 30) +'upx; left: '+ (windowWidth*2 - 550) +'upx;'">
				<text style="font-size: 18px; color: #F1F1F1;">{{changeTime}} / {{videoTimes}}</text>
			</view>
			<!-- 这里就是进度条了：纯手工进度条，调整位置的话就把他们的 bottom 改成一下就行了 -->
			<view v-if="isDragging == false" @touchmove="touchmove" @touchend="touchend" @touchstart="touchstart"
				:style="'position: absolute; bottom: '+ (ProgressBarBottom - 40) +'upx; left: 0;'">
				<!-- 1.这一步必须加，为了适配低端机型 -->
				<text :style="'width: '+ windowWidth +'px; opacity: 0;'">.</text>
				<!-- 2.这是未加载的时的右边的灰色部分 -->
				<view
					:style="'width: '+ windowWidth +'px; height: 4upx; background-color: #C8C7CC; position: absolute; bottom: '+ ProgressBarBottom +'upx; opacity: '+ ProgressBarOpacity +';'">
				</view>
				<!-- 3.这里我采用的分离式办法：就是让滑动样式和不滑动的样式分开，这样相互不干扰，可以避免进度条闪动的问题 -->
				<!-- 4.注意：isShowProgressBarTime 加入了返回数据中 -->
				<view v-if="dataList[k].isShowProgressBarTime == false"
					:style="'width: '+ (currentPosition) +'px; height: 4upx; background-color: #FFFFFF; position: absolute; bottom: '+ ProgressBarBottom +'upx; left: 0; opacity: '+ (ProgressBarOpacity - 0.1) +';'">
				</view>
				<view v-if="dataList[k].isShowProgressBarTime == true"
					:style="'width: '+ (currentPositions) +'px; height: 8upx; background-color: #FFFFFF; position: absolute; bottom: '+ ProgressBarBottom +'upx; left: 0; opacity: '+ (ProgressBarOpacity + 0.05) +';'">
				</view>
				<view v-if="dataList[k].isShowProgressBarTime == false"
					:style="'width: 4px; height: 4px; background-color: #FFFFFF; border-radius: 10px; position: absolute; bottom: '+ (ProgressBarBottom - 2) +'upx; left: '+ (currentPosition) +'px; opacity: '+ ProgressBarOpacity +';'">
				</view>
				<view v-if="dataList[k].isShowProgressBarTime == true"
					:style="'width: '+ dotWidth +'px; height: '+ dotWidth +'px; background-color: #FFFFFF; border-radius: 10px; position: absolute; bottom: '+ (ProgressBarBottom - 5) +'upx; left: '+ (currentPositions - 5) +'px; opacity: '+ ProgressBarOpacity +';'">
				</view>
			</view>
		</view>
		<uni-popup @maskClick="close" ref="tel" type="bottom">
			<view v-if="dataList[k].goods_id==0">
				<scroll-view scroll-y="true" style="width: 100%;background-color: #FFFFFF;border-top-left-radius: 15px;  border-top-right-radius: 15px;" v-if="isShow">
					<div
						style="display: flex;flex-direction: row;align-items: center;padding-left: 30upx;margin-top: 6px;">
						<text style="margin-left: 160px;font-size: 15px;">职位</text>
						<image src="../../static/closed.png" mode=""
							style="width: 38upx;height: 38upx;margin-left: 148px;" @click="close()"></image>
					</div>
					<div class="zhilist" v-for="(item,index) in zhilist" :key="index"
						style="padding-top: 20px;padding-bottom: 20px;">
						<div style="flex-direction: row;justify-content: space-between;align-items: center;"
							@click="zhidetail(item.id)">
							<text>{{item.job_name}}</text>
							<text
								style="font-weight: normal;font-size: 15px;">{{item.min_salary}}k-{{item.max_salary}}k</text>
						</div>
						<div class="zhong" style="padding: 15upx;flex-direction: row;align-items: center;padding-top: 30upx;padding-left: 0;">
							<div
								style="width: 140upx;height: 50upx;background: #F5F5F5;border-radius: 15upx;line-height: 50upx;text-align: center;">
								<text
									style="color: #666666;font-size: 26upx;text-align: center;line-height: 50upx;">{{item.year}}年</text>
							</div>

						</div>
						<div style="flex-direction: row;justify-content: space-between;align-items: center;padding-top: 48upx;padding-bottom: 20upx;">
							<text style="font-size: 28upx;color: #999999;">{{item.work_address}}</text>
							<div
								style="background-color: #999999;width: 140upx;border-radius: 15upx;color: #FFFFFF;text-align: center;padding: 10upx;height: 70upx;" v-if="item.is_send==1">
								<text style="color: #fff;text-align: center;line-height: 50upx;">已投递</text>
							</div>
							<div
								style="background-color: #FF3D3D;width: 140upx;border-radius: 15upx;color: #FFFFFF;text-align: center;padding: 10upx;height: 70upx;" v-else>
								<text style="color: #fff;text-align: center;line-height: 50upx;" @click="toudi(item)">投递</text>
							</div>
						</div>
					</div>
				</scroll-view>

				<scroll-view scroll-y="true" v-else
					style="background-color: #fff;padding: 30upx 0;height: 400px;overflow: auto;border-top-left-radius: 15px;  border-top-right-radius: 15px;">
					<div
						style="display: flex;flex-direction: row;align-items: center;padding-left: 30upx;margin-top: 15px;">
						<image src="../../static/zuo.png" mode="" style="width: 50upx;height: 50upx;"
							@click="isShow=true"></image>
						<text style="margin-left: 120px;">职位详情</text>
					</div>
					<div class="zhilist" style="border: none;margin-top: 30upx;">
						<div style="flex-direction: row;justify-content: space-between;align-items: center;">
							<text>{{zlist.job_name}}</text>
							<text
								style="font-weight: normal;font-size: 15px;">{{zlist.min_salary}}k-{{zlist.max_salary}}k</text>
						</div>
						<div class="zhong"
							style="padding: 15upx;flex-direction: row;align-items: center;display: flex;">
							<div style="flex-direction: row;display: flex;text-align: center;">
								<text
									style="color: #999999;font-size: 26upx;text-align: center;line-height: 50upx;">{{zlist.work_address}}</text>
							</div>
							<div style="flex-direction: row;display: flex;text-align: center;padding-left: 30upx;">
								<text
									style="color: #999999;font-size: 26upx;text-align: center;line-height: 50upx;">{{zlist.year}}</text>
							</div>
						</div>
						<div style="flex-direction: column;justify-content: center;align-items: flex-start;">
							<text>职位描述</text>
							<div
								style="width: 140upx;height: 50upx;background: #F5F5F5;border-radius: 15upx;line-height: 50upx;text-align: center;margin-top: 30upx;">
								<text style="color: #666666;font-size: 26upx;line-height: 50upx;">计算机类</text>
							</div>
						</div>
						<div
							style="flex-direction: column;justify-content: center;align-items: flex-start;margin-top: 50upx;padding-bottom: 40upx;">
							<text>岗位职责</text>
							<text style="padding: 20upx;">
								{{zlist.desc}}
							</text>
						</div>
						<div
							style="background-color: #242730;width: 600upx;border-radius: 15upx;color: #FFFFFF;text-align: center;height: 88upx;margin: 0 auto;margin-left: 30upx;" v-if="zlist.is_send==1">
							<text style="color: #fff;text-align: center;line-height: 88upx;">已投递</text>
						</div>
						<div
							style="background-color: #FF3D3D;width: 600upx;border-radius: 15upx;color: #FFFFFF;text-align: center;height: 88upx;margin: 0 auto;margin-left: 30upx;" v-else>
							<text style="color: #fff;text-align: center;line-height: 88upx;" @click="toudi(zlist)">投递</text>
						</div>
					</div>
				</scroll-view>
			</view>

			<view style="width: 100%;height: 200px;background-color: #FFFFFF;border-top-left-radius: 15px;  border-top-right-radius: 15px;padding-bottom: 20px;" v-else>
				<view class="window_content" style="border-top-left-radius: 10px;  border-top-right-radius: 10px;padding-bottom: 20px;">
<!-- 					<view class="top_box" style="flex-direction: row;justify-content: center;">
						<text style="text-align: center;color: #000;padding: 15rpx 0 0;font-size: 30rpx;">职位</text>
						<image @click="close" src="@/static/images/img/window_close.png" mode=""
							style="position: absolute;width: 26rpx;height: 26rpx;right: 20rpx;top: 10rpx;"></image>
					</view> -->
					
					<view class="window_center">
						<view class="item_box" style="flex-direction: column;width: 100%;margin: 20rpx 3vw;">
							<view style="flex-direction: row;align-items: center;justify-content: center;">
								<text style="padding-left: 140px;font-size: 15px;">购物</text>
								<image src="../../static/closed.png" style="width: 38upx;height: 38upx;margin-left: 140px;" @click="close()"></image>
							</view>
							<view class="left" style="flex-direction: row;padding-top: 10px;padding-left: 30upx;" @click="getnav(dataList[k].goodslist.id)">
								<image :src='dataList[k].goodslist.goods_img'
									style="width: 100px;height: 100px;background-color: #000000;border-radius: 10px;">
								</image>
								<view class="vertical" style="width: 100%;flex-direction: column;color: #f9a116;margin-left: 20rpx;justify-content: space-between;height: 100px;">
									<text class="name" style="width: 400upx;font-size: 15px;color: #000;overflow: hidden;text-overflow: ellipsis;" >{{dataList[k].goodslist.goods_name}}</text>
									<view style="flex-direction: row;align-items: center;justify-content: space-between;">
										<view style="flex-direction: row;align-items: center;justify-content: center;">
											<text class='price' style="color: #F9A116;font-size: 14px;" >劵后¥</text>
											<text style="font-size: 22px;color: #F9A116;">{{dataList[k].goodslist.shop_price}}</text>
										</view>
										<view style="width: 240upx;height: 76upx;background: #FF3D3D;border-radius:10upx;margin-left: 50px;flex-direction: row;">
											<view style="width: 40px;height: 40px;background: #F5F5F5;flex-direction: row;justify-content: center;align-items: center;">
												<image src="../../static/images/tabbar/cart_active.png" mode="" style="width: 17px;height: 16px;"></image>
											</view>
											<text style="color: #fff;text-align: center;line-height: 76upx;font-size: 18px;padding-left: 5px;">领劵购买</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<view class="nav_btn" 
						style="height: 140rpx;line-height: 140rpx;border-top: 1px solid #eeeeee;flex-direction: row;justify-content: center;align-items: center;padding-right: 40px;padding-top: 20px;padding-bottom: 40px;" @click="navWindowcase">
						<text style="font-size: 15px;color: #000000;">进入{{dataList[k].shopinfo_shop_name}}的商品橱窗</text>
					</view>
				</view>

			</view>

		</uni-popup>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="base" :duration="2000" :before-close="true" @close="closew" @confirm="confirm"
				content="是否前往登录页面"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="pinglun" type="bottom">
			<view
				style="width: 100%;background-color: #FFFFFF;border-top-left-radius: 10px;  border-top-right-radius: 10px;">
				<view
					style="flex-direction: row;align-items: center;padding: 8px;justify-content: center;border-top-left-radius: 10px;  border-top-right-radius: 10px;">
					<text style="padding-left: 140px;font-size: 15px;">{{pinums}}条评论</text>
					<image src="../../static/closed.png" style="width: 38upx;height: 38upx;margin-left: 130px;"
						@click="closeq"></image>
				</view>
				<scroll-view scroll-y="true"
					style="width: 100%;background-color: #FFFFFF;height: 420px;padding-bottom: 40px;border-top-left-radius: 10px;  border-top-right-radius: 10px; ">
					<view class="pl"
						style="width: 100%;background-color: #fff;position: relative;border-top-left-radius: 10px;  border-top-right-radius: 10px;">
						<view style="padding-top: 10px;" v-if="pinlist.length>0">
							<view style="flex-direction: row;padding: 15px;" v-for="(item,index) in pinlist">
								<image :src="item.headimgurl" mode=""
									style="width: 90rpx;height: 90rpx;border-radius: 40px;"></image>
								<view style="flex-direction: column;align-items: center;justify-content: center;">
									<view class="nrs" style="flex-direction: column;padding-left: 30upx;">
										<text style="color: #999999;font-size: 13px;">{{item.user_name}}</text>
										<text style="color: #333333;padding-top: 3px;font-size: 15px;"
											@click.stop.prevent="shanchu(item)">{{item.comment}}</text>
										<view style="flex-direction: row;align-items: center;padding-top: 5px;">
											<text style="color: #999999;font-size: 12px;">{{item.add_time}}</text>
											<text style="padding-left: 10upx;color: #999999;font-size: 12px;"
												@click="huifus(item.id,item.uid)">回复</text>
										</view>
									</view>
									<view class="nrs" v-for="(items,indexs) in item.replylist"
										style="flex-direction: row;padding-top: 10upx;">
										<image :src="items.headimgurl" mode=""
											style="width: 50rpx;height: 50rpx;border-radius: 40px;"></image>
										<view
											style="flex-direction: column;padding-left: 8upx;align-items: flex-start;">
											<text style="color: #999999;font-size: 13px;">{{items.user_name}}</text>
											<view style="flex-direction: column;padding-top: 3px;">
												<text @longtap.stop.prevent="shanchus(items.id)"
													style="color: #333333;padding-top: 3px;font-size: 15px;">{{items.comment}}</text>
												<text style="color: #999999;font-size: 12px;">{{items.add_time}}</text>
											</view>
										</view>
									</view>
								</view>
							</view>

						</view>
						<view v-else style="font-size: 20px;color: #000000;text-align: center;padding-top: 50px;">
							<text
								style="font-size: 20px;color: #000000;text-align: center;padding-top: 50px;">暂无评论</text>
						</view>
						<view class="bottomd" style="padding-left: 20upx;" v-if="ishui">
							<image src="../../static/pinlun.png" mode="" style="width: 32upx;height: 32upx;"></image>
							<input type="text" value="" placeholder="精彩评论" style="padding-left: 20upx;width: 250px;"
								ref="input" v-model="comment" @focus="bindfocus" @blur="blur_input"
								adjust-position="false" />
							<text class="buttons" @click="fabiao">发送</text>
						</view>
						<view class="bottomd" style="padding-left: 20upx;" v-else>
							<image src="../../static/pinlun.png" mode="" style="width: 32upx;height: 32upx;"></image>
							<input type="text" value="" placeholder="回复内容" style="padding-left: 20upx;width: 250px;"
								ref="input" v-model="huifu" 
								adjust-position="false" />
							<text class="buttons" @click="huifuw">回复</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	// import userList from './data.js' //这个是假数据
	import listLeft from "../../components/video/listLeft.vue";
	import homeWindow from '../../components/homeWindow.vue'

	export default {
		data() {
			return {
				//下面打🌟号的是必须要的基础字段
				//下面打💗号的是拥有滑动条的必须字段
				dataList: [], //用于数据循环的列表🌟💗
				isFload: true,
				youinfo:{},
				ishui:true,
				isshou:false,
				wHeight: 0, //获取的屏幕高度🌟💗
				boxStyle: { //视频，图片封面样式🌟💗
					'height': 0,
					'width': 0,
				},
				videoInfo: {},
				zhilist: [],
				userInfos: {},
				k: 0, //默认为0🌟💗
				playIngIds: [], //正在播放的视频id列队，列队用于处理滑动过快导致的跳频问题🌟💗
				ready: false, //可忽略
				isDragging: false, //false代表停止滑动🌟💗
				refreshing: true, //用于下拉刷新🌟💗
				windowWidth: 0, //获取屏幕宽度🌟💗
				dex: [0, 0], //用于判断是上滑还是下滑，第一个存旧值，第二个存新值【目前在1.0.7已经废弃】
				currents: 0, //用于左右滑动，0代表视频界面，1代表右滑界面🌟💗
				platform: '', //用于获取操作系统：ios、android🌟💗
				playIng: false, //用于视频初始化时是否播放，默认不播放🌟💗
				videoTime: '', //视频总时长，这个主要用来截取时间数值💗
				videoTimes: '', //视频时长，用这个来获取时间值，例如：00:30这个时间值💗
				changeTime: '', //显示滑动进度条时变化的时间💗
				isShowimage: false, //是否显示封面【1.0.4已废弃，但是意思需要记住】
				currenttimes: 0, //当前时间💗
				isShowProgressBarTime: false, //是否拖动进度条，如果拖动（true）则显示进度条时间，否则不显示（false）【1.0.4已废弃，但是意思需要记住】
				ProgressBarOpacity: 0.7, //进度条不拖动时的默认值，就是透明的💗
				dotWidth: 0, //播放的小圆点，默认没有💗
				deleteHeight: 0, //测试高度🌟💗
				percent: 0, //百分小数💗
				currentPosition: 0, //滑块当前位置💗//2.0已弃用，现已用于后端参数
				currentPositions: 0, //滑块当前位置的副本💗//2.0已弃用，现已用于后端参数
				newTime: 0, //跟手滑动后的最新时间💗
				timeNumber: 0, //🌟💗
				ProgressBarBottom: 20, //进度条离底部的距离💗
				object_fit: 'fill', //视频样式默认包含🌟💗
				mode: 'aspectFit', //图片封面样式🌟💗
				timeout: "", //🌟用来阻止 setTimeout()方法
				voice: "", //🌟用来阻止 setTimeout()方法
				oldVideo: "",
				clickLoading: false,
				statusBarHeight: 0,
				translateX: '10',
				zlist: {},
				isShow: true,
				showIndex: 1,
				pinlist:[],
				pinums:0,
				pinId:'',
				comment:'',
				shiId:'',
				cityname:"长沙市"
			}
		},
		components: {
			listLeft,
			homeWindow,
		},
		watch: {
			k(k,old_k){//监听 k 值的变化，可以控制视频的播放与暂停
				console.log(k)
				this.dataList[old_k].state = 'stop'//如果是被滑走的视频，就停止播放
				this.dataList[old_k].playIng = false//如果视频暂停，就加载封面
				this.dataList[old_k].isplay = true
				uni.createVideoContext(this.dataList[old_k]._id,this).play()
				clearTimeout(this.oldVideo)
				this.oldVideo = setTimeout(()=>{
					uni.createVideoContext(this.dataList[old_k]._id,this).seek(0)
					uni.createVideoContext(this.dataList[old_k]._id,this).pause()
					console.log('预留第' + (old_k + 1) + '个视频：' + this.dataList[old_k]._id)
				},500)
				// 2.0版本已经去掉了下面这一句，视频不用暂停，只需要把声音禁止就行
				// uni.createVideoContext(this.dataList[old_k]._id + '' + old_k,this).stop()//如果视频暂停，那么旧视频停止，这里的this.dataList[old_k]._id + '' + old_k，后面加 old_k 是为了每一个视频的 id 值不同，这样就可以大程度的避免串音问题
				console.log('已经暂停 --> 第' + (old_k + 1) + '个视频～')//提示
				uni.createVideoContext(this.dataList[k]._id,this).play()
				this.getyou(this.dataList[this.k].id)
				this.zhidetail(this.dataList[this.k].shop_id)
				clearTimeout(this.voice)
				this.voice = setTimeout(()=>{
					this.dataList[k].isplay = false
				},300)
				if(this.platform == 'ios'){
					setTimeout(()=>{
						this.dataList[k].playIng = true
					},850)
				} else {
					this.dataList[k].playIng = true
				}
				//【2.0版本更新内容】- start
				var p = k
				++p
				setTimeout(()=>{
					uni.createVideoContext(this.dataList[p]._id,this).play()
				},20)
				clearTimeout(this.timeout)
				this.timeout = setTimeout(()=>{
					uni.createVideoContext(this.dataList[p]._id,this).seek(0)
					uni.createVideoContext(this.dataList[p]._id,this).pause()
					console.log('预加载第' + (p + 1) + '个视频：' + this.dataList[p]._id)
				},1500)
				//【2.0版本更新内容】- end
			}
		},
		onShow() {
			try {
				const value = uni.getStorageSync('userInfo');
				const valued = uni.getStorageSync('cityName');
				if (value) {
					this.userInfos = value
					
				}
				if(valued){
					this.cityname = valued
				}else{
					this.cityname = "长沙市"
				}
			} catch (e) {
				// error
			}
			this.animateTranslateX()
			if(this.dataList.length !== 0){
				this.dataList[this.k].state = 'play';
				uni.createVideoContext(this.dataList[this.k]._id,this).play()
			}
		},
		onHide() {
			this.dataList[this.k].state = 'pause';//界面隐藏也要停止播放视频
			uni.createVideoContext(this.dataList[this.k]._id,this).pause();//暂停以后继续播放
			console.log('到后台');
		},
		onLoad() {
			try {
				const value = uni.getStorageSync('userInfo');
				const valued = uni.getStorageSync('cityName');
				if (value) {
					this.userInfos = value
				}
				if(valued){
					this.cityname = valued
				}else{
					this.cityname = "长沙市"
				}
			} catch (e) {
				// error
			}
			this.platform = uni.getSystemInfoSync().platform
			var model = uni.getSystemInfoSync().model
			if(this.platform == 'ios' && (model !== 'iPhone6' || model !== 'iPhone6s' || model !== 'iPhone7' || model !== 'iPhone8')){
				this.deleteHeight = 42//有 tabbar的 修改这里可以改变视频高度
			}
			this.windowWidth = uni.getSystemInfoSync().screenWidth//获取屏幕宽度
			this.boxStyle.width = this.windowWidth + 'px'//给宽度加px
			this.wHeight = uni.getSystemInfoSync().screenHeight;//获取屏幕高度
			this.boxStyle.height = this.wHeight - this.deleteHeight;//改变视频高度
			this.get()//这一步，加载视频数据
			this.username = uni.getStorageSync('username')
			uni.request({
				url: 'https://dsx.cdzer.com/api/Video/getVideoList', //仅为示例，并非真实接口地址。
				data: {
					uid: this.userInfos.id,
					page: 1,
					cate_id: 0,
					lat: 28.227404,
					lng: 112.905383,
					titleIndex: 1
				},
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded',
				},
				success: (res) => {
					// console.log(res.data, "视频列表")
				}
			});
	

		},
		onReady() {},
		methods: {
			tuijian(){
				this.showIndex = 1
				this.k = 0
				this.get()
			},
			guanzhu(){
				this.showIndex = 2
				console.log(this.userInfos,"userInfos")
				this.k = 0
				let userInfos = JSON.parse(this.userInfos)
				uni.request({
					url: 'https://dsx.cdzer.com/api/Video/getVideoList',
					method: 'POST',
					data: {
						uid: userInfos.id,
						page: 1,
						cate_id: 0,
						lat: 28.227404,
						lng: 112.905383,
						titleIndex: 2
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						var msg = res.data.data.video_list
						this.dataList = msg
						this.dataList[0].state = "play";
						this.getyou(this.dataList[this.k].id)
						
						setTimeout(()=>{
							//这里的延迟是为了避免执行时间太快而直接跳过执行的 bug
							uni.createVideoContext(this.dataList[0]._id,this).seek(0)
							uni.createVideoContext(this.dataList[0]._id,this).play()
						},200)
						this.dataList[0].isplay = false
						setTimeout(()=>{
							this.dataList[0].playIng = true
						},500)
						var p = 0
						setTimeout(()=>{
							++p
							uni.createVideoContext(this.dataList[p]._id,this).play()
							setTimeout(()=>{
								uni.createVideoContext(this.dataList[p]._id,this).seek(0)
								uni.createVideoContext(this.dataList[p]._id,this).pause()
								console.log('预加载第' + (p + 1) + '个视频：' + this.dataList[p]._id)
							},2000)
						},50)
					}
				})
			},
			huifus(id,uid) {
				this.ishui = false
				this.huifuid = id
				this.hfUid = uid
			},
			huifuw() {
				var userinfos = JSON.parse(this.userInfos)
				uni.request({
					url: 'https://dsx.cdzer.com/api/Video/addvideocomment_reply', //仅为示例，并非真实接口地址。
					data: {
						video_id: this.dataList[this.k].id,
						uid: userinfos.id,
						reply_uid:this.hfUid,
						comment: this.huifu,
						com_id: this.huifuid
					},
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						console.log(res, "视频回复")
						if (res.data.status == 200) {
							uni.showToast({
								title: res.data.mess,
							})
							this.huifu = ''
							setTimeout(() => {
								this.pinglunlist(this.dataList[this.k].id)
							}, 800)
						} else {
							uni.showToast({
								title: res.data.mess,
								icon: 'none'
							})
						}
					}
				});
			},
			getnav(id){
				var navitem = 1
				uni.navigateTo({
					url:`/pagesC/homeSon/goodsDetails?id=${id}&navitem=${navitem}`
				})
			},
			navWindowcase(){
				console.log('触发')
				uni.showTabBar({
					
				})
				uni.navigateTo({
					url:'/pagesC/home/showcase/showcase?id='+ this.dataList[this.k].circle_shop_id
				})
			},
			aaa(){
				console.log(this.videoInfo,"视频")
			},
			bindfocus(){
				console.log("获取焦点",this.userInfos)
				if(JSON.stringify(this.userInfos) == '{}'){
					// 
					var userinfo = {}
					console.log(111)
					uni.navigateTo({
						url:'/pagesB/login/login'
					})
				}else{
					var userinfo = JSON.parse(this.userInfos)
				}
					
				uni.onKeyboardHeightChange(res => {
				  console.log(res.height)
				})
				uni.onWindowResize((res) => {
				    console.log('变化后的窗口宽度=' + res.size.windowWidth)
				    console.log('变化后的窗口高度=' + res.size.windowHeight)
				})
			},
			blur_input(){
				console.log("失去焦点")
				 // window.scrollTo(0, 0)
			},
						
			shanchu(item) {
				var usrinfo = JSON.parse(this.userInfos)
				console.log(item.uid,usrinfo.id,"usrinfo.idusrinfo.idusrinfo.id")
				if(item.uid == usrinfo.id){
					// alert(1111)
				}else{
					this.shiId = this.dataList[this.k].id
					clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
						var that = this
					this.Loop = setTimeout(function() {
					
						uni.showModal({
							title: '删除',
							content: '请问要删除本条评论吗？',
							success: function(res) {
								if (res.confirm) {
									that.delzz(item.id)
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
								
							}
						});
					}.bind(this), 100);
				}
			
			},
			shanchus(id) {
				this.shiId = id
				console.log(id)
				clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
					var that = this
				this.Loop = setTimeout(function() {
					uni.showModal({
						title: '删除',
						content: '请问要删除本条回复吗？',
						success: function(res) {
							if (res.confirm) {
								// that.delzzs(that.shiId)
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
			
						}
					});
				}.bind(this), 100);
			},
			delzz(id){
				var usrinfo = JSON.parse(this.userInfos)
				if(usrinfo.id){
					var yonghuId = usrinfo.id
				}else{
					var yonghuId = ''
				}
				uni.request({
					url: 'https://dsx.cdzer.com/api/Video/delcomment', //仅为示例，并非真实接口地址。
					data: {
						video_id: this.shiId,
						uid: yonghuId,
						com_id: id
					},
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						console.log(res, "视频删除")
						if (res.data.status == 200) {
							uni.showToast({
								title:'删除成功'
							})
								this.pinglunlist()
						} else {
							uni.showToast({
								title: res.data.mess,
								icon: 'none'
							})
						}
					}
				});
			},
			fabiao() {
				var usrinfo = JSON.parse(this.userInfos)
				if(usrinfo.id){
					var yonghuId = usrinfo.id
				}else{
					var yonghuId = ''
				}
				uni.request({
					url: 'https://dsx.cdzer.com/api/Video/addvideocomment', //仅为示例，并非真实接口地址。
					data: {
						video_id: this.pinId,
						uid: yonghuId,
						comment: this.comment
					},
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						console.log(res, "视频评论")
						if (res.data.status == 200) {
							uni.showToast({
								title: res.data.mess,
							})
							this.comment = ''
							setTimeout(() => {
								this.pinglunlist(this.pinId)
								uni.request({
									url: 'https://dsx.cdzer.com/api/Video/getvideoinfo', //仅为示例，并非真实接口地址。
									data: {
										video_id: this.dataList[this.k].id,
							
									},
									method: 'POST',
									header: {
										'content-type': 'application/x-www-form-urlencoded',
									},
									success: (res) => {
										// console.log(res.data, "视频列表")
										this.youinfo = res.data.data
									}
								});
							}, 800)
						} else {
							uni.showToast({
								title: res.data.mess,
								icon: 'none'
							})
						}
					}
				});
			},
			pinglunlist(id) {
				this.pinId = id
				uni.request({
					url: 'https://dsx.cdzer.com/api/Video/video_comment', //仅为示例，并非真实接口地址。
					data: {
						video_id: id,
						page: 1,
						page_size: 10
					},
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						if(res.data.mess == "暂无评论！！"){
							this.pinums = 0
							uni.showToast({
								title: res.data.mess,
								icon: 'none'
							})
							this.pinlist = []
						}else{
							this.pinlist = res.data.data.data
							this.pinums = res.data.data.num
							
						}
						console.log(res, "视频评论")
			
					}
				});
			},
			fload() {
				//改变isFload的状态
				this.isFload = !this.isFload;
			},
			shoucai(){
				// this.dataList[k].describe.length = 60
			},
			naviSearch() {
				uni.navigateTo({
					url: '../../pagesC/home/search/search'
				})
			},
			toudi(item) {
				var userinfo = JSON.parse(this.userInfos)
				console.log(userinfo,"用户信息")
				if(JSON.stringify(this.userInfos) == '{}'){
					
					console.log(111)
					uni.navigateTo({
						url:'/pagesB/login/login'
					})
				}else{
					uni.request({
						url: 'http://dsx.cdzer.com/api/Job/apply_job', //仅为示例，并非真实接口地址。
						method: 'POST',
						data: {
							job_id: item.id,
							shop_id: this.dataList[this.k].shop_id,
							uid:userinfo.id
						},
						header: {
							'content-type': 'application/x-www-form-urlencoded',
						},
						success: (res) => {
							console.log(res, "投递")
							if (res.data.status == 200) {
								uni.showToast({
									title: res.data.mess,
									icon: 'none'
								})
							} else {
								uni.showToast({
									title: res.data.mess,
									icon: 'none'
								})
							}
						}
					});
				}
			
			},
			zhidetail(id) {
				var userinfo = JSON.parse(this.userInfos)
				uni.request({
					url: 'https://dsx.cdzer.com/api/Job/job_details', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						job_id: id,
						uid:userinfo.id
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						console.log(res.data.data, "招聘职位列表")
						this.zlist = res.data.data
						this.isShow = false
					}
				});
			},
			handleForward() {
				// console.log("分享", `${this.userInfo.title}`, this.videoInfo)
				uni.share({
					type: 0,
					title: `${this.dataList[this.k].title}`,
					summary: `${this.dataList[this.k].shopinfo_shop_name}`,
					provider: 'weixin',
					scene: 'WXSceneSession',
					href: `${this.dataList[this.k].video_url}`, //分享的标准格式为 "https://xxx.xxx.com/h5/#/...'
					imageUrl: this.dataList[this.k].cover_img,
					success: () => {
						this.http('api/Alive/shareOk').then(res => {
							if (res.status === 200) {
								uni.showToast({
									title: "分享成功",
									duration: 2000,
									icon: 'none'
								});
							}
						})
					},
					fail: err => {
						uni.showToast({
							title: "分享失败",
							duration: 2000,
							icon: 'none'
						});
					}
				});
			},
			toshop(id) {
				uni.navigateTo({
					url: `/pagesC/home/personage/personage?userId=${id}&circle_id=${this.dataList[this.k].circle_id}`
				})
			},
			tome(id) {
				uni.navigateTo({
					url: `/pages/tabBar/mydetail?userId=${id}`
				})
			},
			confirm() {
				console.log("确定")
				uni.navigateTo({
					url: '/pagesB/login/login'
				})
			},
			opens() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center')
			},
			closew() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			close() {
				// console.log('触发')
				this.$refs.tel.close()
			},
			closeq() {
				// console.log('触发')
				this.$refs.pinglun.close()
				this.$refs.input.blur();  
			},
			// close() {
			// 	// console.log('触发')
			// 	this.$refs.zhiwei.close()
			// },
			toti(id) {
				uni.navigateTo({
					url: `../huati/index?id=${id}`
				})
			},
			getNavCircle(id, type, state) {
				console.log(id,type,state)
				if (type == 1) {
					uni.navigateTo({
						url: '/pagesC/home/shopDetail/shopDetail?id=' + id,
						fail: err => {
							console.log(err)
						}
					})
				} else if (type == 2 && state == 1) {
					uni.navigateTo({
						url: `/pages/zhanhui/index?shop_id=${this.dataList[this.k].circle_shop_id}&circle_id=${this.dataList[this.k].circle_id}`
					})
				} else if (type == 2 && state == 2) {
					uni.navigateTo({
						url: `/pages/zhanhui/zhaning?shop_id=${this.dataList[this.k].circle_shop_id}&circle_id=${this.dataList[this.k].circle_id}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/zhanhui/index?shop_id=${this.dataList[this.k].circle_shop_id}&circle_id=${this.dataList[this.k].circle_id}`
					})
				}
			},
			getNavCircled(id) {
				uni.navigateTo({
					url:'../../pagesC/home/shopDetail/shopDetail?id='+id,
					fail:err=>{
						console.log(err)
					}
				})
			},
			open() {
				this.$refs.tel.open()
			},
			addfollow() {
				console.log(this.userInfos, "关注的用户信息")

				this.clickLoading = true
				let shop_id = this.dataList[this.k].shop_id
				var arr = Object.keys(this.userInfos);
				if (arr.length == 0) {
					this.opens()
				} else {
					uni.request({
						url: 'https://dsx.cdzer.com/api/CollShops/addfollow', //仅为示例，并非真实接口地址。
						data: {
							shop_id: shop_id,
							client_id: 1,
							api_token: "cc5b76977da82b342ff57c61a04e405e",
							token: "5f23d5925cd7e67de215121ebb0868301987d664"
						},
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded',
						},
						success: (res) => {

							this.dataList[this.k].is_follow = 1
							this.dataList[this.k].follow_num++
							this.$emit('setFollow', 'true')
							console.log('关注', this.userInfo)
						}
					});
				}


			},
			cancelFollow() {
				console.log(this.userInfos, "取关的用户信息")

				this.clickLoading = true
				let shop_id = this.dataList[this.k].shop_id
				var arr = Object.keys(this.userInfos);
				if (arr.length == 0) {
					this.opens()
				} else {
					uni.request({
						url: 'https://dsx.cdzer.com/api/CollShops/cancelcoll', //仅为示例，并非真实接口地址。
						data: {
							shop_id: shop_id,
							client_id: 1,
							api_token: "cc5b76977da82b342ff57c61a04e405e",
							token: "5f23d5925cd7e67de215121ebb0868301987d664"
						},
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded',
						},
						success: (res) => {
							this.dataList[this.k].is_follow = 0

							this.dataList[this.k].follow_num--
							this.$emit('setFollow', 'true')
							console.log('取消', this.dataList[this.k].is_follow)

						}
					});
				}


			},
			toCreaterPage() {
				console.log(this.video, "店铺Id")
				uni.navigateTo({
					url: `/pagesC/home/personage/personage?userId=${this.dataList[this.k].shop_id}&circle_id=${this.dataList[this.k].circle_id}`
				})
			},
			toCreaterPages() {
				console.log(this.video, "店铺Id")
				var typed = 0
				uni.navigateTo({
					url: `/pages/tabBar/uerinfo?userId=${this.dataList[this.k].memberinfo_id}&padding=${typed}`
				})
			},
			animateTranslateX() {
				// dubbedText
				let num = this.dataList[this.k].describe.length * 5;
				timer = setInterval(() => {
					this.translateX--
					if (this.translateX == -(num + 35)) {
						this.translateX = num
					}
				}, 60)
			},
			getData() {
				var msg = []
				// var msg = userList
				uni.request({
					url: 'https://dsx.cdzer.com/api/Video/getVideoList', //仅为示例，并非真实接口地址。
					data: {
						uid: this.userInfos.id,
						page: 1,
						cate_id: 0,
						lat: 28.227404,
						lng: 112.905383,
						titleIndex: 1
					},
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						msg = res.data.data.video_list
					}
				});
				// for (let i = 0; i < 10; i++) {
				// 	this.dataList.push(msg[i])
				// }
			},
			touchstart(event) {
				this.dataList[this.k].isShowimage = true //刚触摸的时候就要显示预览视频图片了
				this.dataList[this.k].isShowProgressBarTime = true //显示时间线
				this.ProgressBarOpacity = 1 //让滑块显示起来更明显一点
				this.dotWidth = 10 //让点显示起来更明显一点
			},
			touchend() { //当手松开后，跳到最新时间
				uni.createVideoContext(this.dataList[this.k]._id, this).seek(this.newTime)
				if (this.dataList[this.k].state == 'pause') {
					this.dataList[this.k].state = 'play'
					uni.createVideoContext(this.dataList[this.k]._id, this).play()
				}
				this.dataList[this.k].isShowProgressBarTime = false //触摸结束后，隐藏时间线
				this.dataList[this.k].isShowimage = false //触摸结束后，隐藏时间预览
				this.ProgressBarOpacity = 0.5 //隐藏起来进度条，不那么明显了
				this.dotWidth = 0 //隐藏起来进度条，不那么明显了
			},
			touchmove(event) { //当手移动滑块时，计算位置、百分小数、新的时间
				var msg = []
				if (this.videoTime !== '') {
					msg = this.videoTime.split(':')
				}
				var timeNumber = Number(msg[0]) * 60 + Number(msg[1])
				this.currentPositions = event.changedTouches[0].screenX
				this.percent = this.currentPositions / this.windowWidth
				this.newTime = this.percent * timeNumber
				this.currenttimes = parseInt(this.newTime)
				let theTime = this.newTime
				let middle = 0; // 分
				if (theTime > 60) {
					middle = parseInt(theTime / 60);
					theTime = parseInt(theTime % 60);
				}
				this.changeTime =
					`${Math.round(middle)>9?Math.round(middle):'0'+Math.round(middle)}:${Math.round(theTime)>9?Math.round(theTime):'0'+Math.round(theTime)}`
			},
			timeupdate(event, index) { //计算滑块当前位置，计算当前百分小数
				// console.log(index)
				if (index == this.k) {
					// console.log(event)
					var currenttime = event.detail.currentTime
					this.timeNumber = Math.round(event.detail.duration)
					this.getTime()
					this.percent = currenttime / this.timeNumber
					this.currentPosition = this.windowWidth * this.percent
					let theTime = currenttime
					let middle = 0; // 分
					if (theTime > 60) {
						middle = parseInt(theTime / 60);
						theTime = parseInt(theTime % 60);
					}
					this.changeTime =
						`${Math.round(middle)>9?Math.round(middle):'0'+Math.round(middle)}:${Math.round(theTime)>9?Math.round(theTime):'0'+Math.round(theTime)}`
					//自动切换视频
					if (currenttime == this.timeNumber - 1) {
						const dom = uni.requireNativePlugin('dom')
						let doms = 'item' + (this.k + 1)
						setTimeout(() => {
							let el = this.$refs[doms][0]
							dom.scrollToElement(el, {
								offset: 0,
								animated: true
							})
						}, 500)
					}
				}
			},
			getTime() { //得到时间函数
				this.videoTime = this.formatSeconds(this.timeNumber);
				// console.log(that.videoTime)
				var msg = []
				if (this.videoTime !== '') {
					msg = this.videoTime.split(':')
				}
				this.videoTimes = `${msg[0]>9?msg[0]:'0'+msg[0]}:${msg[1]>9?msg[1]:'0'+msg[1]}`;
			},
			formatSeconds(value) { //获取时间函数
				let theTime = parseInt(value); // 秒
				let middle = 0; // 分
				if (theTime > 60) {
					middle = parseInt(theTime / 60);
					theTime = parseInt(theTime % 60);
				}
				return `${middle>9?middle:middle}:${theTime>9?theTime:theTime}`;
			},
			playIngs(index) {
				//
			},
			tozuozhe() {
				this.currents = 1 //点击头像以后就会切换
			},
			stop() {
				// console.log('stop')
			},
			scrolls(event) {
				this.isDragging = event.isDragging
				if (!event.isDragging) { //isDragging：判断用户是不是在滑动，滑动：true，停止滑动：false。我们要用户停止滑动时才给 k 赋值，这样就可以避免很多麻烦
					var i = Math.round(Math.abs(event.contentOffset.y) / (this.wHeight - this.deleteHeight +
						1)) //先用绝对值取出滑动的距离，然后除以屏幕高度，取一个整，就知道你现在滑动到哪一个视频了
					if (i !== this.k) { //这里加判断是因为这个方法会执行很多次，会造成重复请求，所以这里写一个限制
						this.k = i //判断了用户没有滑动，确认了用户的确是在看这个视频，然后就赋值啦
						this.dataList[this.k].state = 'play'
						console.log('正在播放 --> 第' + (this.k + 1) + '个视频～')
						
					}
				}
			},
			get() {
				console.log(this.k,"666")
				// 这个方法主要就是用来第一次进入视频播放时用来处理的

				
				uni.request({
					url: 'https://dsx.cdzer.com/api/Video/getVideoList',
					method: 'POST',
					data: {
						uid: 1246,
						page: 1,
						cate_id: 0,
						lat: 28.227404,
						lng: 112.905383,
						titleIndex: 1
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						var msg = res.data.data.video_list
						this.dataList = msg
						this.dataList[0].state = "play";
						this.zhidetail(this.dataList[this.k].shop_id)
						this.getyou(this.dataList[this.k].id)
						setTimeout(()=>{
							//这里的延迟是为了避免执行时间太快而直接跳过执行的 bug
							uni.createVideoContext(this.dataList[0]._id,this).seek(0)
							uni.createVideoContext(this.dataList[0]._id,this).play()
						},200)
						this.dataList[0].isplay = false
						setTimeout(()=>{
							this.dataList[0].playIng = true
						},500)
						var p = 0
						setTimeout(()=>{
							++p
							uni.createVideoContext(this.dataList[p]._id,this).play()
							setTimeout(()=>{
								uni.createVideoContext(this.dataList[p]._id,this).seek(0)
								uni.createVideoContext(this.dataList[p]._id,this).pause()
								console.log('预加载第' + (p + 1) + '个视频：' + this.dataList[p]._id)
							},2000)
						},50)
					}
				})
			},
			zhidetail(id){
				var userinfos = JSON.parse(this.userInfos)
				uni.request({
					url: 'https://dsx.cdzer.com/api/Job/getshopjob', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						uid:userinfos.id,
						shop_id: id
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						console.log(res.data.data, "招聘职位列表")
						this.zhilist = res.data.data
					}
				});
			},
			getyou(id){
				uni.request({
					url: 'https://dsx.cdzer.com/api/Video/getvideoinfo', //仅为示例，并非真实接口地址。
					data: {
						video_id: id,
					},
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						console.log(res.data, "播放列表")
						this.youinfo = res.data.data
					}
				});
			},
			onpullingdown() {
				// console.log('正在下拉刷新，此时手还在触摸没有松开')
				this.refreshing = true
			},
			onrefresh() {
				// console.log('下拉刷新完毕，此时手松开了')
				setTimeout(() => {
					this.refreshing = false
				}, 1000)
			},
			//点击播放&&暂停
			tapVideoHover(state, event) {
				this.dataList[this.k].isShowimage = false
				this.dataList[this.k].isShowProgressBarTime = false
				this.ProgressBarOpacity = 0.5
				this.dotWidth = 0
				console.log('state--', state, this.dataList[this.k].state);
				if (state == 'play' || state == 'continue') {
					this.dataList[this.k].state = 'pause';
				} else {
					this.dataList[this.k].state = 'continue';
				}
				if (this.dataList[this.k].state == 'continue') {
					uni.createVideoContext(this.dataList[this.k]._id, this).play(); //暂停以后继续播放
				}
				if (this.dataList[this.k].state == 'pause') {
					uni.createVideoContext(this.dataList[this.k]._id, this).pause(); //暂停以后继续播放
				}
			},
			toComment(i,id) {
				this.ishui = true
				this.$refs.pinglun.open('bottom')
				this.pinglunlist(id)
			},
			selcetCity(){
				var huati = "3"
				uni.navigateTo({
					url: `../tabBar/bianji/city?type=${huati}`
				})
			},
			share() {
				uni.share({
					type: 0,
					title: `${this.dataList[this.k].shop_name}`,
					summary: `${this.dataList[this.k].shop_name}`,
					provider: 'weixin',
					scene: 'WXSceneSession',
					href: `${this.dataList[this.k].video_url}`, //分享的标准格式为 "https://xxx.xxx.com/h5/#/...'
					imageUrl: this.dataList[this.k].cover_img,
					success: () => {
						this.http('api/Alive/shareOk').then(res => {
							if (res.status === 200) {
								uni.showToast({
									title: "分享成功",
									duration: 2000,
									icon: 'none'
								});
							}
						})
					},
					fail: err => {
						uni.showToast({
							title: "分享失败",
							duration: 2000,
							icon: 'none'
						});
					}
				});
			},
			cLike(sss) {
				this.dataList[this.k].like = !this.dataList[this.k].like
				const video = this.dataList[this.k];
				sss ? video.like_n -= 1 : video.like_n += 1;
			}
		}
	}
</script>
<style>
	/* .top_nav {
		position: absolute;
		top: 50px;
		left: 150px;
		right: 0;
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
	} */
	/deep/ .uni-video-video {
		width: auto;
	
	}
	.xuan{
		color: #fff;
		font-size: 40upx;
		margin-left: 40px;
		padding-top: 42px;
		font-weight: bold;
		border-bottom: 2upx solid #EEEEEE;
	}
	.mei{
		color:#A9A9A9;
		font-size: 40upx;
		padding-left: 40px;
		padding-top: 42px;
		font-weight: bold;
	}
	.bottomd {
		flex-direction: row;
		align-items: center;
		position: fixed;
		bottom: 10upx;
		width: 400px;
		height: 100upx;
		padding: 30upx;
		background: #fff;
	}
	
	.buttons {
		width: 120upx;
		height: 60upx;
		border: 2upx solid #FF3D3D;
		border-radius: 5px;
		font-size: 24upx;
		line-height: 60upx;
		text-align: center;
		color: #FF3D3D;
		margin-left: 68upx;
	}
	
	.zhankai {
		color: #fff;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 10rpx;
		font-size: 14px;
		width: 40px;
		height: 30px;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		line-height: 30px;
		text-align: center;
	}
	
	.zhilist {
		padding: 30upx;
		border-bottom: 2upx solid #EEEEEE;
	}
	
	.bian {
		color: #fff;
		font-size: 50upx;
		padding-top: 30px;
		padding-left: 100px;
		border-bottom: 2upx soild #fff;
	}
	
	.top_nav .top_content {
		padding-top: 30upx;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	
	.top_nav .top_content .player {
		position: absolute;
		left: 20px;
		top: 35upx;
	}
	
	.top_nav .top_content .img {
		width: 44upx;
		height: 44upx;
	}
	
	.top_nav .top_content .content_btn {
		flex-direction: row;
		width: 220px;
		align-items: center;
		justify-content: space-around;
	}
	
	.top_nav .top_content .content_btn .content_item {
		position: relative;
		height: 30px;
	}
	
	.top_nav .top_content .content_btn .content_item .line_on {
		position: absolute;
		width: 30px;
		height: 2px;
		background-color: #FFFFFF;
		bottom: 0;
		left: 2px;
		border-radius: 4upx;
	}
	
	.top_nav .top_content .content_btn .content_item .item_title {
		color: #dcdcdc;
		font-size: 36upx;
		font-weight: bold;
	}
	
	.top_nav .top_content .content_btn .content_item .i_on {
		font-weight: bold;
		font-size: 38upx;
		color: #FFFFFF !important;
	}
	
	.top_nav .top_content .search {
		position: absolute;
		right: 20px;
		top: 35upx;
	}
	
	.add {
		position: absolute;
		top: 80upx;
		left: 36upx;
		color: white;
		font-size: 28upx;
		width: 34upx;
		height: 34upx;
		background-color: #F12F5B;
		border-radius: 50%;
		text-align: center;
		line-height: 36upx;
		font-weight: bold;
	}
	
	
	.left_dubbedText {
		color: #FFFFFF;
		font-size: 15px;
		flex-direction: row;
		margin-top: 16rpx;
	}
	
	.left_dubbedText_text {
		color: #eee;
		font-size: 15px;
		line-height: 50upx;
	}
	
	@keyframes turn {
		0% {
			-webkit-transform: rotate(0deg);
		}
	
		25% {
			-webkit-transform: rotate(90deg);
		}
	
		50% {
			-webkit-transform: rotate(180deg);
		}
	
		75% {
			-webkit-transform: rotate(270deg);
		}
	
		100% {
			-webkit-transform: rotate(360deg);
		}
	}
	
	.container {
		background-color: #000000;
		/* background-color: #007AFF; */
	
	}
	
	.item {
		/* width : 750rpx; */
		background-color: #000000;
		position: relative;
	}
	
	.videoHover {
		position: absolute;
		top: 0;
		left: 0;
		flex: 1;
		background-color: rgba(0, 0, 0, 0.1);
		justify-content: center;
		align-items: center;
	
		/* border-style: dashed;
		border-color: #DD524D;
		border-width: 1px; */
	}
	
	.playState {
		width: 160rpx;
		height: 160rpx;
		opacity: 0.2;
	}
	
	.userInfo {
		position: absolute;
		bottom: 180px;
		right: 10px;
		flex-direction: column;
	}
	
	.userInfos {
		position: absolute;
		top: 110px;
		left: 10px;
		flex-direction: column;
		z-index: 99;
	}
	
	.userAvatar {
		border-radius: 500%;
		margin-bottom: 15px;
		border-style: solid;
		border-width: 2px;
		border-color: #ffffff;
	}
	
	.userAvatar {
		width: 100rpx;
		height: 100rpx;
	}
	
	.likeIco,
	.shareIco,
	.commentIco {
		width: 60rpx;
		height: 60rpx;
		margin-top: 15px;
	}
	
	.likeNum,
	.commentNum,
	.shareTex {
		color: #ffffff;
		font-size: 30rpx;
		text-align: center;
		margin: 5px;
	}
	
	.likeNumActive {
		color: red;
	}
	
	/* 文字部分的样式 */
	.content {
		/* width: 720rpx; */
		/* height: 600upx; */
		/* background-color: #32CD32; */
		z-index: 99;
		position: absolute;
		bottom: 60px;
		/* justify-content: center; */
		padding: 15rpx;
		flex-direction: column;
		justify-content: flex-start;
		color: #ffffff;
	}
	
	.userName {
		font-size: 34rpx;
		color: #ffffff;
		margin-top: 20upx;
		font-weight: bold;
	}
	
	.wordsd {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}
	
	.wordp {
		margin-top: 16rpx;
		font-size: 30rpx;
		color: #ffffff;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 5;
		lines: 5;
	}
	
	.words {
		margin-top: 16rpx;
		font-size: 30rpx;
		color: #ffffff;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 3;
		lines: 3;
	}
	
	.wordd {
		flex-direction: row;
		font-size: 30rpx;
		color: #ffffff;
	}
	
	.root {
		background-color: #000000;
	
	}
</style>
